<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p v-text="msg"></p>
    <p v-upper="msg"></p>
</div>
<div id="app1">
    <p v-text="msg"></p>
    <p v-upper="msg"></p>
</div>
<script src="js/vue.js"></script>
<script>
    Vue.config.productionTip=false;
    //自定义指令分为定义全局指令和局部指令
    //定义全局指令 设置的时候不用v-指令名称  使用的时候要添加v-指令名称
    //全局指令 不管有几个vue的实例 都可以使用
    //参数  1.指令名称(不包含v- 只能是全小写)
    //     2.回调函数(参数1使用这个指令的节点,参数2这个指令使用的表达式的值以及表达式的集合)
    // Vue.directive('upper',function (node,bindings){
    //     // console.log(node,bindings);
    //     node.textContent=bindings.value.toUpperCase();
    // });
    new Vue({
        el:'#app',
        data(){
            return {
               msg:'hello world'
            }
        },
        //局部变量 几乎不用
        directives:{
           upper(node,bindings){
             node.textContent=bindings.value.toUpperCase();
           },
            lower(node,bindings){
                node.textContent=bindings.value.toLowerCase();
            },
        }
    });
    new Vue({
        el:'#app1',
        data(){
            return {
                msg:'hello world'
            }
        }
    });
</script>
</body>
</html>